---
title: Animated List
date: 2023-12-12
description: A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
author: dillionverma
published: true
video: https://cdn.magicui.design/animated-list.mp4
---

<ComponentPreview name="animated-list-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/animated-list.tsx
```

<ComponentSource name="animated-list" />

</Steps>

## Props

| Prop      | Type   | Description                       | Default |
| --------- | ------ | --------------------------------- | ------- |
| className | string | The class name for the component  | ""      |
| delay     | number | The delay between each item in ms | 1000    |
